import { useStore } from "@/store";
import { message, Modal } from "antd";
import { CommonPPT } from "@/components/CommonPPT";

const PPTDisplayList = () => {
  const {
    powerPointArr,
    curpowerPointIndex,
    updatePowerPointIndex,
    createPowerPoint,
    deletePowerPoint,
    PPtBgtype,
    PPtBgValue1,
    PPtBgValue2,
  } = useStore();
  // 单个幻灯片

  // 定义一个异步函数，用于删除幻灯片
  const handleDeleteSlide = async (indexs) => {
    // 如果幻灯片数量小于2，则提示至少保留一个幻灯片
    if (powerPointArr.length < 2) {
      message.error("至少保留一个幻灯片");
      return;
    }
    try {
      // 弹出确认框，询问是否删除该幻灯片
      Modal.confirm({
        title: "提示",
        content: (
          <>
            <div>确认是否要删除该幻灯片？</div>
          </>
        ),
        okText: "确定",
        cancelText: "取消",
        onOk: () => {
          // 复制幻灯片数组
          const newSlideList = [...powerPointArr];
          // 删除指定索引的幻灯片
          newSlideList.splice(indexs, 1);
          // 删除完重新排序
          newSlideList.forEach((item, index) => {
            item.sortId = index + 1;
          });
          // 调用删除幻灯片的接口
          deletePowerPoint(newSlideList);
        },
        onCancel: () => {},
      });
    } catch (error) {
      console.log("", error);
      // 删除失败时提示错误信息
      message.error("删除失败");
    }
  };

  return (
    <div
      style={{
        // 设置元素的位置为相对定位
        position: "relative",
        // 设置元素的高度为视口高度减去40像素
        height: "calc(100vh - 40px)",
        // 设置元素的下边距为10像素
        paddingBottom: 10,
        // 设置元素的内容溢出时隐藏
        overflow: "hidden",
      }}
    >
      <div
        // 设置按钮的样式
        style={{
          // 设置按钮的宽度为250
          width: 250,
          // 设置按钮的高度为36
          height: 36,
          // 设置按钮的文本居中对齐
          textAlign: "center",
          // 设置鼠标悬停在按钮上时显示为手型
          cursor: "pointer",
        }}
        onClick={() => {
          createPowerPoint();
        }}
      >
        新增一张空白幻灯片
      </div>
      <div
        // 设置样式，使内容超出时可以滚动，并且高度为100%
        style={{
          overflowY: "auto",
          height: "100%",
        }}
      >
        {powerPointArr?.map((items, indexs) => {
          return (
            <>
              <div
                key={items.id}
                style={{
                  // 设置宽度为224
                  width: 220,
                  // 设置高度为114
                  height: 110,
                  // 设置底部外边距为20
                  marginBottom: 20,
                  // 设置左边外边距为20
                  marginLeft: 20,
                  // 设置右边外边距为10
                  marginRight: 10,
                  // 设置边框为1像素的实线，颜色为#e8e8e8
                  border: "1px solid #e8e8e8",
                  // 设置定位为相对定位
                  position: "relative",
                  // 设置阴影，如果items.sortId等于curpowerPointIndex，则设置阴影为0 1px 2px 0 rgba(0, 0, 0, 0.13), 0 1px 6px -1px rgba(0, 0, 0, 0.12),0 2px 4px 0 rgba(0, 0, 0, 0.12)，否则设置为0 0px 0px 0 rgba(0, 0, 0, 0)
                  boxShadow:
                    items.sortId === curpowerPointIndex
                      ? `0 1px 2px 0 rgba(0, 0, 0, 0.43), 0 1px 6px -1px rgba(0, 0, 0, 0.43),0 2px 4px 0 rgba(0, 0, 0, 0.43)`
                      : "0 0px 0px 0 rgba(0, 0, 0, 0)",
                }}
                onClick={() => {
                  updatePowerPointIndex(items.sortId);
                }}
              >
                <div
                  style={{
                    // 设置元素的位置为绝对定位
                    position: "absolute",
                    // 设置元素的顶部位置为0
                    top: 0,
                    // 设置元素的左侧位置为0
                    left: 0,
                    // 设置元素的宽度为220
                    width: 216,
                    // 设置元素的高度为110
                    height: 110,
                    // 设置元素的背景颜色为红色
                    background: "red",
                    // 设置元素的透明度为0
                    opacity: 0,
                    // 设置元素的层级为2
                    zIndex: 2,
                  }}
                />
                <div
                  // 设置样式
                  style={{
                    // 设置定位为绝对定位
                    position: "absolute",
                    // 设置顶部位置为0
                    top: 0,
                    // 设置右侧位置为0
                    right: 0,
                    // 设置层级为10
                    zIndex: 10,
                    // 设置显示为块级元素
                    display: "block",
                    // 设置字体大小为16
                    fontSize: 16,
                    // 设置鼠标样式为指针
                    cursor: "pointer",
                  }}
                  onClick={(e) => {
                    e.stopPropagation();
                    e.preventDefault();
                    handleDeleteSlide(indexs);
                  }}
                >
                  删除
                </div>
                <div
                  style={{
                    // 设置显示方式为弹性布局
                    display: "flex",
                    // 设置主轴方向为水平方向
                    flexDirection: "row",
                    // 设置换行方式为换行
                    flexWrap: "wrap",
                    // 设置主轴上的对齐方式为两端对齐
                    justifyContent: "space-between",
                    // 设置宽度为1100
                    width: 1100,
                    // 设置高度为550
                    height: 550,
                    // 设置外边距为自动
                    margin: "auto",
                    // 设置内边距为16
                    padding: 16,
                    // 设置右边内边距为8
                    paddingRight: 8,
                    // 设置溢出方式为隐藏
                    overflow: "hidden",
                    // 设置背景颜色为白色
                    // 设置缩放比例为0.2
                    transform: "scale(0.2)",
                    // 设置上边距为-220
                    marginTop: -220,
                    // 设置左边距为-440
                    marginLeft: -440,
                    background:
                      items?.PPtBgtype == "gradient"
                        ? `linear-gradient(to bottom right,${items?.PPtBgValue1},${items?.PPtBgValue2})`
                        : items?.PPtBgtype == "img"
                        ? `url(${items?.PPtBgValue1}) 0% 0% / cover no-repeat`
                        : items?.PPtBgValue1 || "#fff",
                    backgroundSize: "cover", // 设置背景图片大小
                    backgroundRepeat: "no-repeat", // 设置背景图片不重复
                  }}
                >
                  <CommonPPT slideListItem={items} />
                </div>
              </div>
            </>
          );
        })}
      </div>
    </div>
  );
};

export default PPTDisplayList;
